<template>
    <div>
        <el-row class="topMsg">
            <router-link to="/customerDetail"><el-button size="mini">添加客户</el-button></router-link>
            <div class="rightWay">
                <el-select width="150" v-model="value4" size="mini" clearable placeholder="选择客户状态" @change="clearStatus">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-input placeholder="联系方式/联系人/客户名称" size="mini" v-model="contactWay" clearable @change="clearSearch"></el-input>
                <el-button class="rightMargin" type="primary" size="mini" @click="searchUser">搜索</el-button>
            </div>
        </el-row>
        <el-table
            :data="tableData"
            stripe
            border
            @row-click="openDetails"
            style="width: 100%">
            <el-table-column
            fixed
            prop="kehu_id"
            label="客户ID"
            width="100">
            </el-table-column>
            <el-table-column
            prop="kehu_name"
            label="客户名称"
            >
            </el-table-column>
            <el-table-column
            prop="contact"
            label="联系人"
            width="120">
            </el-table-column>
            <el-table-column
            prop="tel"
            label="电话"
            width="120">
            </el-table-column>
            <el-table-column
            prop="email"
            label="邮箱"
            width="180">
            </el-table-column>
            <el-table-column
            prop="account.username"
            label="账号"
            width="120">
            </el-table-column>
            <el-table-column
            label="服务"
            prop="status"
            width="80">
            </el-table-column>
            <el-table-column
            label="账号操作"
            width="100">
            <template slot-scope="scope">
                <el-button v-if="scope.row.account == undefined" @click.stop="handleClick(scope.row)" type="text" size="small">刪除</el-button>
                <el-button v-if="scope.row.account != undefined" type="text" size="small" @click.stop="changeStatus(scope.row)">{{scope.row.account.is_active ? '停用' : '启用'}}</el-button>
                <el-button class="renew" v-if="scope.row.status == '到期'" type="text" size="small" @click.stop="renew(scope.row)">续费</el-button>
                
            </template>
            </el-table-column>
        </el-table>
        
        <el-pagination
        class="paganitionRight"
        @current-change="handleSizeChange"
        :page-size="10"
        :pager-count="9"
        layout="total, prev, pager, next"
        :total="totalCount">
        </el-pagination>
    </div>
</template>
<script>
export default {
    name: 'customer',
    data () {
        return {
            contactWay: '', // 查找数据
            options: [
                {
                    value: '到期',
                    label: '到期'
                },
                {
                    value: '正常',
                    label: '正常'
                }
            ],
            value4: '',
            tableData: [],
            totalCount: 0,
            curIndex: 1,
        }
    },
    mounted () {
        this.getData();
    },
    methods: {
        handleClick(row) {
            this.$axios.post(`/api/kehu/${row.id}/delete/`).then(res => {
                console.log(res);
            })
        },
        openDetails(row){
            // row, event, column 三个参数
            
            this.$router.push({
                path: 'customerDetail',
                query: {
                    id: row.id
                }
            })
        },
        searchUser () {
            this.curIndex = 1;
            this.getData();
        },
        handleSizeChange(val) {
            this.curIndex = val;
            this.getData();
        },
        changeStatus (row) {
            this.$confirm('此操作将改变用户状态, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                this.$axios.post(`/api/kehu/${row.id}/change_active/`).then(res => {
                    if (res.status === 200) {
                        row.account.is_active = !row.account.is_active;
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            })


            
        },
        getData () {
            this.$axios.get('/api/kehu/', {
                params:{
                    page: this.curIndex,
                    search: this.contactWay,
                    status: this.value4
                }
            }).then(res => {
                if (res.status === 200 && res.data.count > 0) {
                    this.totalCount = res.data.count;
                    this.tableData = res.data.results;
                }else{
                    this.tableData = [];
                }
            }).catch((error)=>{
                console.log(error);
                console.log('查无资源');
                this.tableData = [];
            })
        },
        clearStatus () {
            this.getData();
        },
        clearSearch () {
            this.getData();
        },
        renew(row){
            this.$confirm('此操作将为用户续费一年, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                    this.$axios.get(`/api/kehu/${row.id}/serv_add_365days/`)
                    .then((res)=>{
                        if(res.status === 200){
                            this.$message({
                                type: 'success',
                                message: '续费成功!'
                            });
                        }
                        this.getData();

                    }).catch((error)=>{
                        console.log(error);
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                })
        }

    },
}
</script>
<style scoped lang="scss">
.rightWay {
    float: right;
}
.rightMargin {
    margin-right: 50px;
}
.topMsg {
    margin-bottom: 10px;
}
.el-input {
    width: 190px!important;
}
.renew{
    color:#F56C6C;
}
</style>


